【自動化】PageSpeed ModuleでWebサイトのパフォーマンスチューニング #1 インストール編
はじめに
パフォーマンスチューニングって手間ですよね。
そんな時にお金（サーバーのスペック）とちょっとしたスキルでぱぱっとパフォーマンスを改善できるのがPageSpeed Module（Mod Pagespeed）ってやつです。
対象者
この記事では黒い画面（コンソール）からsshでサーバーにアクセスし、LinuxコマンドやViを使った各種操作を行う必要があります。
自分もWebデザイナー上がりなのでWebデザイナーやコーダー、フロントエンジニアのような方にも黒い画面やサーバー側に興味を持ってもらい挑戦してもらえると仲間が増えて嬉しいな〜なんて思ってます。
PageSpeed Moduleって？
PageSpeed ModuleはWebサイトのロードタイムを高速化するためのツールです。
PageSpeed Moduleをサーバーにインストールし適切な設定を行うことでWebサイトをほとんど調整することなくHTML,CSS,JS,画像などを自動で最適化してくれます（自動化の度合いにより調整は必要になることがあります）。
PageSpeed Moduleの主なポイント
PageSpeed ModuleはApacheとNginx上で利用できます。
confファイルを調整することで、個々の機能をディレクティブ内で有効にしたり無効にしたりできます。
- CSS,JavaScript,画像の最適化
- 最新のWeb最適化テクニック
- 40以上のWeb最適化フィルター
- オープンソースで頻繁にアップデート
- サイト単位で適用可能、ホスティング業者、CDNで利用可
なんと言っても「CSS,JavaScript,画像の最適化」と「40以上のWeb最適化フィルター」が強力です。
例えば、画像の軽量化やいくつかのCSSやJSファイルを1つにしたり、無駄なコメントや改行の削除、ファイルサイズの小さなJSファイルをHTMLのインラインに埋め込んでしまうなど非常に高機能で設定一つで使うことができます。
サイトの作りなどにより使えないということもあります。
時間に余裕のある方はこちらの動画をどうぞ。PageSpeed Moduleがどんなものか紹介されています。
フィルターの種類
この回では個々のフィルター（PageSpeed Filters）について紹介はしませんが、主にこれらの目的を持ったフィルターが用意されています。
- キャッシュの最適化
- リクエスト・レスポンスタイムの最適化
- リクエスト・オーバーヘッドの最適化
- データサイズの最小化
- ブラウザレンダリングの最適化
- その他
サポートプラットフォーム
PageSpeed Moduleは以下のプラットフォームをサポートしています。
- CentOS/Fedora (32-bit and 64-bit)
- Debian/Ubuntu (32-bit and 64-bit)
PageSpeed Moduleのインストール
それではインストールしてみましょう。
私の環境はAWS(Amazon Web Services)のEC2（Amazon Linux 64bit）上でApache版をインストールします。
その他の環境は申し訳ないですが利用したことがないので省きます。
とりあえずApacheを入れたい
Apacheのインストールについては詳しい解説を省きますのでご自身でインストールをお願いします。
$ yum -y install httpd $ chkconfig httpd on
ダウンロードとインストール
Installing From Packagesにアクセスします。
ページ右側にあるバージョンから任意のリンクをコピーします。
普通はLatest Stable Versionが良いでしょう。あとはご自身の環境に合わせてプラットフォームと32bit/64bitを選択してください。
まず、yum innstallを使いatをインストールします。ただ、ほとんどの場合はインストールされているようです。
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm $ yum install at
最新バージョンが入っているようです。
Loaded plugins: priorities, security, update-motd, upgrade-helper amzn-main | 2.1 kB 00:00 amzn-updates | 2.3 kB 00:00 mod-pagespeed | 951 B 00:00 Setting up Install Process Package at-3.1.10-43.8.amzn1.x86_64 already installed and latest version Nothing to do
先ほど選択したパッケージをwgetで取得します。
さらにダウンロードしたPageSpeed Moduleをrpm -Uでインストールします。
$ rpm -U mod-pagespeed-stable_current_x86_64.rpm
有効にするためApacheを再起動しましょう。
$ service httpd restart
動作確認の準備
確認用のファイルを作る
まず、確認用にスペースやタブを含むHTMLファイルを作ってみます。
$ vi /var/www/html/index.html
中身はこんな感じにしてみます。
<html>
<head>
<title>PageSpeed Module Test</title>
</head>
<body>
<h1>Hello World</h1>
<button name="Hi!" disabled="disabled">
</body>
</html>
できたら:wpで保存して抜けましょう。
ブラウザでアクセスして表示されるか確認しておいてください。
pagespeed.confを設定する
pagespeed.confをいじって動作を確認してみましょう。
$ vi /etc/httpd/conf.d/mod_pagespeed.conf
開いた一部。
Attempt to load mod_version if it wasn't loaded or compiled in (eg on Debian)
<IfModule !mod_version.c>
LoadModule version_module /usr/lib64/httpd/modules/mod_version.so
</IfModule>
<IfVersion < 2.4>
LoadModule pagespeed_module /usr/lib64/httpd/modules/mod_pagespeed.so
</IfVersion>
<IfVersion >= 2.4.2>
LoadModule pagespeed_module /usr/lib64/httpd/modules/mod_pagespeed_ap24.so
</IfVersion>
# Only attempt to load mod_deflate if it hasn't been loaded already.
<IfModule !mod_deflate.c>
LoadModule deflate_module /usr/lib64/httpd/modules/mod_deflate.so
</IfModule>
<IfModule pagespeed_module>
# Turn on mod_pagespeed. To completely disable mod_pagespeed, you
# can set this to "off".
ModPagespeed on
# We want VHosts to inherit global configuration.
# If this is not included, they'll be independent (except for inherently
# global options), at least for backwards compatibility.
ModPagespeedInheritVHostConfig on
# Direct Apache to send all HTML output to the mod_pagespeed
# output handler.
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
...
PageSpeed Module自体はデフォルトでModPagespeed onになっていますが、ほとんどのフィルターはOffになっているのであまり心配する必要はありません。
フィルターを有効にしてみる
HTMLの無駄なスペースやタブを削除するフィルターcollapse_whitespace（Collapse Whitespace）とHTMLの属性を省くフィルターelide_attributes（Elide Attributes）をOnにしてみます。
pagespeed.confの73行目のコメント#を外します。
# ModPagespeedEnableFilters collapse_whitespace,elide_attributes
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
:wqで保存し抜けましょう。
一応service httpd restartをしておいてください。これですべての準備ができました。
動作確認
ブラウザで開いても違いがわからないので、ソースコードを表示してみてください。実際に作ったHTMLとは違っているはずです。
<html> <head> <title>PageSpeed Module Test</title> </head> <body> <h1>Hello World</h1> <button name="Hi!" disabled> </body> </html>
すべてのタブが無くなり、7行目の属性も記述が変わっていますね。
これで無事動作していることがわかりました。
クエリストリングを使ってPageSpeed Moduleをリクエスト毎にオフにする
オン・オフの確認の度にpagespeed.confをいじっていたら手間で仕方ないですよね。
そんな時はURLのクエリストリングに?ModPagespeed=offを付けるとそのリクエスト時のみPagespeed Moduleをオフにすることができます。
最後に
これでインストール編は終わりです。
HTMLを全くいじることなくHTMLが書き換えられたのがわかってもらえたと思います。ほとんどのフィルターはこのようにコメントを外すだけで勝手に最適化してくれるので手間をかけたくない時に非常に便利です。ただし、アクセスの多いサイトではサーバーに負荷をかけることにもなるので注意してください。
次回はフィルターにどんなものがあるのか具体的に紹介していきたいと思います。待てない方はPageSpeed Filtersをどうぞ。
